<template>
  <div class="container">
    <cons-card :name="yearData.name" :allIndex="yearData.all"></cons-card>
    <cons-list :data="yearData"></cons-list>
  </div>
</template>

<script>
import getData from "../services/index";
import { onMounted, computed, ref, onActivated } from "vue";
import { useStore } from "vuex";

import ConsList from "../components/List/YearList.vue";

export default {
  name: "YearPage",
  components: {
    ConsList,
  },
  setup() {
    const store = useStore(),
      state = store.state,
      status = ref("");

    //生命周期：mounted
    //执行传入回调函数
    onMounted(() => {
      //传入store请求后端数据
      getData(store);

      //定义的响应式状态属性在挂载组件时保存了consName数据(金牛座)
      status.value = state.consName;
    });

    //激活函数
    onActivated(() => {
      //如果他俩不同，说明上面挂载组件的阶段还没有进行过
      //此操作可以解决组件不同步的问题
      if (status.value !== state.consName) {
        getData(store);
        status.value = state.consName;
      }
    });

    return {
      yearData: computed(() => state.year),
    };
  },
};
</script>

<style lang="scss" scoped>
</style>